<template>
  <div>
    <!--添加-->
    <el-input size="small" @keydown.enter.native="addPosition"
              class="SysBasicAddInput" placeholder="添加职位" suffix-icon="el-icon-plus" v-model="pos.name"></el-input>
    <el-button size="small" icon="el-icon-plus" type="primary" @click="addPosition">添加</el-button>
    <!--表格-->
    <div class="SysBasicManaMain">
      <el-table stripe border size="small" :data="positions" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="id" label="编号" width="55">
        </el-table-column>
        <el-table-column prop="name" label="职位" width="120">
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间" width="200">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini"
                @click="showEditView(scope.row)">编辑
            </el-button>
            <el-button size="mini" type="danger"
                @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-button size="small" style="margin-top: 8px" type="danger" :disabled="this.multipleSelection.length==0" @click="deleteMany">批量删除</el-button>
    <el-dialog
      title="职位编辑"
      :visible.sync="dialogVisible"
      width="30%">
      <div>
        <el-tag>职位名称</el-tag>
        <el-input v-model="updatePos.name" size="small" class="SysBasicUpdateInput"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "PosMana",
  mounted() {
    this.initPosition()
  },
  data() {
    return {
      pos: {
        "name": ""
      },
      dialogVisible:false,
      updatePos:{
        "id": '',
        "name": "",
        "createDate": "",
        "enabled": ''
      },
      positions: [],
      multipleSelection: []
    }
  },
  methods: {
    //删除多行
    deleteMany(){
      this.$confirm('此操作将永久删除['+this.multipleSelection.length+']条职位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let request=this.api.position+"?"
        this.multipleSelection.forEach(value => {
          request+="ids="+value.id+"&"
        })
        this.deleteRequest(request).then(res=>{
          if (res){
            this.initPosition()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //修改
    doUpdate(){
      this.putRequest(this.api.position,this.updatePos).then(res=>{
        if (res){
          this.initPosition()
          this.dialogVisible=false
        }
      })
    },
    //初始化表格数据
    initPosition() {
      this.getRequest(this.api.position).then(res => {
        this.positions = res.data
      })
    },
    //添加
    addPosition() {
      if (this.pos.name) {
        this.postRequest(this.api.position, this.pos).then(res => {
          this.initPosition()
          this.pos.name = ''
        })
      } else {
        this.$message.error("请输入要添加的职位名称！")
      }
    },
    //表格监听
    handleSelectionChange(val) {
      this.multipleSelection=val
    },
    //删除一行
    handleDelete(row) {
      const h = this.$createElement;
      this.$msgbox({
        title: '提示',
        message: h('p', null, [
          h('span', null, "此操作将永久删除\t"),
          h('i', {style: 'color: teal'}, row.name),
          h('span', null, "\t职位"),
        ]),
        showClose: false,
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '执行中...';
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 500);
          } else {
            done();
          }
        }
      }).then(action => {
        this.deleteRequest(this.api.position + "?ids=" + row.id).then(res => {
          if (res) {
            this.initPosition()
          }
        })
      }).catch(cancel => {
        this.$message({type: 'info', message: "已取消删除"});
      })
    },
    //显示编辑框
    showEditView(row) {
      this.dialogVisible=true
      Object.assign(this.updatePos,row)
      this.updatePos.createDate=''
    }
  }
}
</script>

<style scoped>

</style>